<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>貓咪管理頁面</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>

<script>
	$(function() {
		$(".block").hover(function(){
			$(".iconinvisible").toggleClass("iconvisible",300).clearQueue();
		});
	});

</script>

<style>
.block {
	position: relative;
	border-style: solid;
	border-color: orange;
	border-radius: 15px;
	margin: 2px;
}
.iconinvisible{
	position: absolute;
	top:5px;
	right:5px;
	opacity: 0;
	filter: alpha(opacity =    0);
}
.iconvisible{
	opacity: 1;
	filter: alpha(opacity =    100);
}
input.text {
	margin-bottom: 12px;
	width: 200px;
	padding: .4em;
	font-size: 16px;
	font-family: '微軟正黑體';
}
.catname{
	position: absolute;
	top: 4px;
	left: 240px;
	font-size: 36px;
}

.catintro{
	position:absolute;
	top:84px; 
	left: 210px; 
	display: block; 
	width:350px; 
	height:250px;
}

.catinfo{
	position:absolute;
	top:0px; 
	left: 260px; 
	display: block; 
	width:350px; 
	height:250px;
}
</style>

</head>

<body>
	<div class="block">
	<p style="position:relative;">
	<img src="../images/cat.jpg" width="160" height="160" style="border-radius: 25px;">
	<span style="text-align: center; font-family: '微軟正黑體';">
	<span class="catname">小花</span>
	<span class="catinfo">出生年：1980<br>
	品種：米克斯<br>
	性別：icon-male<br></span>
	<span class="catintro">簡介：這是小花，我養的第一隻貓~</span>
	</span>
	</p>
	<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
	</div>
	
	<div class="block">
	<p style="position:relative;">
	<img src="../images/cat3.jpg" width="160" height="160" style="border-radius: 25px;">
	<span style="text-align: center; font-family: '微軟正黑體';">
	<span class="catname">小白</span>
	<span class="catinfo">出生年：1990<br>
	品種：米克斯<br>
	性別：icon-male<br></span>
	<span class="catintro">簡介：這是小白，我養的第二隻貓~</span>
	</span>
	</p>
	<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
	</div>
	
	<div class="block">
	<p style="position:relative;">
	<img src="../images/cat4.jpg" width="160" height="160" style="border-radius: 25px;">
	<span style="text-align: center; font-family: '微軟正黑體';">
	<span class="catname">小灰</span>
	<span class="catinfo">出生年：1999<br>
	品種：米克斯<br>
	性別：icon-male<br></span>
	<span class="catintro">簡介：這是小灰，希望大家不要欺負我~</span>
	</span>
	</p>
	<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
	</div>
</body>

</html>
